<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:80:"D:\phpStudy\WWW\ferr\public/../application/wechat\view\cons\businlistdetail.html";i:1493368414;}*/ ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>工程订单</title>
    <link rel="stylesheet" href="__CSS__/bootstrap.min.css">
    <link rel="stylesheet" href="__CSS__/hdw.css">
    <link rel="stylesheet" href="__CSS__/reset.css">
    <link rel="stylesheet" href="__CSS__/common.css">
    <link rel="stylesheet" href="__CSS__/wechat/cons.css">
    <link rel="stylesheet" type="text/css" href="__CSS__/mobiscroll.custom-2.5.2.min.css">
    <script src="__JS__/vue.js"></script>
    <script src="__JS__/libs/jquery-2.0.2.min.js"></script>
    <script src="__JS__/bootstrap/bootstrap.min.js"></script>
    <script src="__JS__/hdw.js"></script>
    <script type="text/javascript" src="__JS__/mobiscroll.custom-2.5.2.min.js""></script>
    <style>
     	#contentBox .navBox{
     		height: 44px;
     		line-height: 44px;
     		text-align: center;
    		font-size: 18px;
    		background: #fff;
    		color: #000;
    		position: fixed;
		    z-index: 1000;
		    top: 0;
       	}
     	#contentBox{     		
     		padding-top: 44px;
     	}
     	.history_back {
		    background: url("__IMG__/wechat/back.png") no-repeat;
		    background-size: cover;
		    position: absolute;
		    top: 0;
		    left: 0;
		    height: 44px;
		    width: 44px;
		}
     	.outer{     		
     		overflow: auto;
     		/*border-bottom: 1px solid #ddd;*/
     		background: #fff;
     		margin-top:10px;
     	}
     	.outer p{
     		font-size: 17px;
     		font-weight: 500;
     		padding: 0 20px;
		    height: 25px;
		    line-height: 25px;
		    /*background: aliceblue;*/
		    /*color: darkseagreen;*/
		    background: #FC866F;
    		color: #fff;
    		position: relative;
     	}
     	
     	.line{     		
     		 border-bottom: 1px solid #ddd; 
     		 padding: 4px 20px;
     	}
     	.lineleft,.lineright{     	
		    min-height:22px;
		    /*line-height: 22px;*/
		    /*overflow: auto;*/
		    font-size: 15px;
     	}     	
     	.lineleft span:first-child,.lineright span:first-child{
     		float: left;
     	}
     	.lineleft span:last-child,.lineright span:last-child,.contract{
     		float: right;
     	}
     	.contract{
     		width:30vw;
     		height:100%;
     	}
     	#all{
     		position: relative;
     	}
     	.bigimg{
     	    height: 100%;
		    width: 100%;
		    position: absolute;
		    background: rgba(0,0,0,0.3);
     	}
     	.bigimg .imgouter{
     		display: block;
     		width: 70vw;
     		height: 70vh;
    		margin: 19vh auto;
     		position: relative;
     	}
     	.bigimg img{
     		display: block;
     		width: 100%;
     		height: 100%;
     	}
     	.quit{
     		display: block;
		    height: 28px;
		    width: 28px;
		    line-height: 28px;
		    border-radius: 50%;
		    text-align: center;
		    font-size: 22px;
		    color: #fff;
		    background: orangered;
		    position: absolute;
		    top: -14px;
		    right: -14px;
     	}
     	.right p img{
     		height: 20px;
		    width: 17px;
		    position: absolute;
		    top: 2px;
		    right: 18px;
     	}
     	.rotate{
     		-moz-transform:rotate(180deg);
			
			-webkit-transform:rotate(180deg);
			
			-o-transform:rotate(180deg);  
			
			-ms-transform:rotate(180deg); 
			
			transform:rotate(180deg); 
     	}
    </style>
</head>
<body >
	<div id="all">
		<div class="bigimg" v-if="show">
			<div class="imgouter">
				<div class="quit" @click="quit">x</div>
				<img :src="order.url" alt="" />
			</div>			
		</div>
		<div id="contentBox">
		    <nav class="navBox">
		    <!--	<div class="header_left history_back"  @click="history_back"></div>-->
		        <span>工程订单</span>        
		    </nav>
		    <div class="mainContent">
				<div class="outer One" >			
					<div class="right">
						<p  @click="showonepart">基本情况 <img @click="rotate" src="__IMG__/wechat/up.png" alt="" class="up" /></p>	
						<div class="showone" v-if="showone">
								<div class="line">
									<div class="lineleft">
										<span>申请人</span>
										<span>{{create.name}}</span>						
									</div>
								</div>
								<div class="line">
									<div class="lineleft">
										<span>申请人职务</span>
										<span>{{create.duty}}</span>
									</div>	
								</div>	
								<div class="line">
									<div class="lineleft">
										<span>负责人</span>
										<span>{{charge.name}}</span>						
									</div>
								</div>
								<div class="line">
									<div class="lineleft">
										<span>负责人职务</span>
										<span>{{charge.duty}}</span>
									</div>	
								</div>
								<div class="line">
									<div class="lineleft">
										<span>时间</span>
										<span>{{order.time | timetrans(1)}}</span>
									</div>	
								</div>
						</div>
					</div>
				</div>
				<div class="outer One">			
					<div class="right">
						<p @click="showtwopart">详情<img @click="rotate" src="__IMG__/wechat/down.png" alt="" class="up" /></p>	
						<div class="showtwo" v-if="showtwo">
							<div class="line">
								<div class="lineleft">
									<span>项目名称</span>
									<span>{{order.name}}</span>						
								</div>
							</div>
							
							<div class="line">
								<div class="lineright">
									<span>金额</span>
									<span>￥{{order.acamount}}</span>
								</div>
							</div>
							<div class="line">
								<div class="lineright">
									<span>周期</span>
									<span>{{order.cycles}}</span>
								</div>
							</div>
							<div class="line">
								<div class="lineright" style="height: 41vw;">
									<span>合同</span>
									<img class="contract" :src="order.url" alt="" @click="showBigimg"/>
								</div>
							</div>
							<div class="line">
								<div class="lineright">
									<span>详细描述</span>
									<span>{{order.content}}</span>
								</div>
							</div>
							<div class="line">
								<div class="lineright">
									<span>备注</span>
									<span>{{order.remarks}}</span>
								</div>
							</div>
						</div>						
					</div>
				</div>
				<div class="outer three">			
					<div class="right">
						<p @click="showthreepart">审核<img src="__IMG__/wechat/down.png" @click="rotate" alt="" class="up" /></p>
						<div class="showthree" v-if="showthree">
							<div class="line"  v-if="!noteshow">
								<div class="lineleft">
									<span>审核进度</span>
									<span>{{jury.curStep}}/{{jury.steps}}</span>						
								</div>					
							</div>
							<div class="line">
								<div class="lineright">
									<span>审核人</span>
									<span>{{juryMan.name}}</span>
								</div>				
							</div>
							<div class="line">
								<div class="lineleft">
									<span>职务</span>
									<span>{{juryMan.duty}}</span>
								</div>					
							</div>
							<div class="line" v-if="noteshow">
								<div class="lineright">
									<span>意见</span>
									<span>{{order.opinion}}</span>
								</div>				
							</div>
							<div class="line">
								<div class="lineright">
									<span></span>
									<span>结果:&nbsp;&nbsp;<span class="color_dred">{{result}}</span></span>
								</div>				
							</div>			
							
						</div>						
					</div>
				</div>
		    </div>
		</div>
	</div>

<script>
    var vm = new Vue({
        el:"#all",
        data(){
        	return{
        		show:false,
        		showone:true,
        		showtwo:false,
        		showthree:false,
        		base:[],
	        	charge:[],
	        	create:[],
	        	goods:[],
	        	order:[],
	        	jury:[],
	        	result:"",
	        	noteshow:true,
	        	juryMan:[]
        	}
            
        },
        methods:{       
          	showBigimg(){
          		this.show=true;         		
          	
          	},
          	quit(){
          		this.show=false;
				console.log(this.show);   
          	},
          	showonepart(e){          	
          		this.showone=!this.showone;
          		$(e.target).find("img").toggleClass("rotate");
          	},
          	showtwopart(e){
          		this.showtwo=!this.showtwo;
          		$(e.target).find("img").toggleClass("rotate");
          	},
          	showthreepart(e){
          		this.showthree=!this.showthree;
          		$(e.target).find("img").toggleClass("rotate");
          	},
          	rotate(e){
          		$(e.target).toggleClass("rotate");
          	}
        },
        created(){
			var _this=this;
			var str=location.href;
			var str=str.split("id/")[1];
			var id=str.split(".html")[0];
			var url="/index.php/manage/Affairengineering/orderDetailData";
			$.post(url,{id:id},function(data){
	    		var data = JSON.parse(data);
        		if(data.status==1){        		
        			var data=data.data;
        			_this.base=data.base;
        			_this.charge=_this.base.charge;
        			_this.create=_this.base.create;
        			_this.jury=data.jury;
        			_this.juryMan=data.jury.juryMan;
        			//y
        			var order=data.order;
        			console.log(data)
        			_this.order=order;
//      			_this.goods=order.goods;
        			if(_this.jury.type==-1){
        				_this.result="处理中";
        				_this.noteshow=false;
        			}else if(_this.jury.type==0){
        				_this.result="未通过";
        			}else if(_this.jury.type==1){
        				_this.result="通过";
        			}
        		}
	    	})
        },
       
    })

	Vue.filter("timetrans",function(date,type){
        var date = new Date(date*1000);//如果date为10位不需要乘1000
        var Y = date.getFullYear();
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);
        var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
        var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
        var m = (date.getMinutes() <10 ? '0' + date.getMinutes() : date.getMinutes());
        var s = (date.getSeconds() <10 ? '0' + date.getSeconds() : date.getSeconds());        
        if(type==1){
          return Y+"/"+M+"/"+D+" "+h+":"+m+":"+s;
        }else if(type==2){
          return Y+"/"+M+"/"+D;
        } else if(type==3){
          return M+"/"+D+" "+h+":"+m;
        }     
      });
    
</script>
</body>
</html>